<!-- 邀请组件 -->
<template>
  <a-modal
    :visible="modalVisible"
    :title="modalTitle"
    :footer="null"
    @cancel="handleCancel(0)">
    <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" ref="formRef" :rules="formRules">
      <a-form-model-item label="手机号" prop="phone">
        <a-input v-model="formData.phone" @change="e => handleInputChange(e.target.value)" placeholder="请输入手机号" />
      </a-form-model-item>
      <a-form-item label="用户">
        <a-input v-model="formData.name" disabled width="100%"/>
        <div style="display: flex" v-if="$auth('PROJECT.PROJECT_MEMBER_ADD')">
          <div :style="{ marginRight: '10px' }">系统中无该用户?</div>
          <!-- <div><router-link to="/system">快捷新建</router-link></div> -->
          <div><a @click="addFast">快捷新建</a></div>
        </div>
      </a-form-item>
      <a-form-item label="账号">
        <a-input v-model="formData.account" disabled width="100%"/>
      </a-form-item>
      <a-form-model-item label="角色" prop="roleId">
        <a-select v-model="formData.roleId">
          <a-select-option v-for="item in rolesList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="成员编号" prop="proUserNo">
        <a-input v-model="formData.proUserNo" placeholder="请输入成员编号" />
      </a-form-model-item>
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-button type="primary" :loading="submitting" @click="handleInvitation" style="float: right" :disabled="isSend">发送邀请</a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <AddDrawer :addFastVisible="addFastVisible" @closeDrawer="closeDrawer" />
  </a-modal>
</template>

<script>
import monitor from '@/utils/monitor'
import groupMemberModal from '@/monitor/components/invitationModal/groupMemberModal'

import { getAdminMessage, sendInvitationTeam } from '@/api/common'
import { getNewRolesList } from '@/api/overview/member'
import AddDrawer from './components/AddDrawer'

const watch = monitor(groupMemberModal)

export default {
  props: {
    projectId: { // 项目Id
      type: [String, Number],
      default: null
    },
    invitedType: { // 被邀请人类型
      type: Number,
      default: null
    },
    modalVisible: {
      type: Boolean,
      default: false
    },
    modalTitle: {
      type: String,
      default: ''
    }
  },
  components: {
    AddDrawer
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      rolesList: [],
      isSend: true,
      addFastVisible: false,
      formData: {},
      invitationData: {},
      formRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
        proUserNo: [
          { required: true, message: '请输入成员编号', trigger: 'change' },
          { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '编号只能为数字和英文' }
        ]
      },
      submitting: false
    }
  },
  created () {
    this.getNewRolesList()
  },
  methods: watch({
    // 点击快捷创建弹窗
    addFast () {
      this.addFastVisible = true
    },
    // 新建弹窗关闭
    closeDrawer () {
      this.addFastVisible = false
    },
    // 获取角色列表
    getNewRolesList () {
      if (this.$route.query.id) {
        getNewRolesList({ proId: this.$route.query.id }) // 注：传1是写死的
          .then(res => {
            this.rolesList = res.filter(item => item.code !== 'PROJECT_ADMIN' && item.code !== 'SYS_BIZ' && item.code !== 'Investigator' && item.code !== 'Subjects')
          })
          .catch(() => {})
      }
    },
    // 手机号码输入框改变
    handleInputChange (value) {
      if (value.length === 11) {
        // 请求接口
        getAdminMessage({ phone: value })
          .then(res => {
            if (res.id) { // 判断是否返回了数据 （判断是否有id即可）
              this.formData.userId = res.id
              this.formData.name = res.name
              this.formData.account = res.account
              this.isSend = false
            } else {
              this.$message.error('系统中无该用户')
            }
          })
          .catch(() => { this.$message.error('系统中无该用户') })
      } else {
        this.formData.userId = null
        this.formData.name = null
        this.formData.account = null
        this.isSend = true
      }
    },
    // 点击发送邀请
    handleInvitation () {
      // if (!this.formData || !this.formData.account) {
      //   this.$message.warning('未找到与此手机号相关的信息，请校验号码是否正确')
      //   return false
      // }
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.invitationData.proId = this.projectId // 父组件传过来的项目id
          this.invitationData.type = this.invitedType // 父组件传来的被邀请人类型
          this.invitationData.phone = this.formData.phone // 输入的电话号码
          this.invitationData.invitedUserId = this.formData.userId // 根据电话号码获取的被邀请人id
          this.invitationData.roleId = this.formData.roleId // 角色id
          this.invitationData.proUserNo = this.formData.proUserNo // 角色id
          this.invitationData.pm = 0 // 角色id
          this.rolesList.forEach(item => {
            if (item.id === this.formData.roleId) this.invitationData.roleCode = item.code
          })
          this.submitting = true
          this.inviteMember()
          sendInvitationTeam({ ...this.invitationData })
            .then(res => {
              this.submitting = false
              // 成功发送邀请后，通知父组件刷新列表
              this.handleCancel(1)
              this.$message.success('发送成功')
            })
            .catch(() => {
              this.submitting = false
            })
          }
      })
    },
    // 点击取消对话框消失
    handleCancel (val) {
      this.$emit('closeInvitateModal', val)
      this.resetForm()
    },
    // 重置数据
    resetForm () {
      this.$refs.formRef.resetFields()
      this.isSend = true
      this.formData = {}
    },
    // 添加团队成员埋点
    inviteMember () {}
  })
}
</script>
<style scoped lang="scss">

</style>
